<template>
  <div class="menu-function">
        <Breadcrumb :pathContent="content"/>
        <el-form>
            <el-form-item>
                <div class="menu-function-content">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="菜单与功能" name="first">
                            <div class="menu-function-setting">
                                <el-form-item style="margin-bottom: 20px;">
                                    <el-button type="primary" size="small" style="float: right;" @click="addDepartment">新增菜单</el-button>
                                </el-form-item>
                                <div class="menu-fcn">
                                  <el-form-item>
                                      <el-tree 
                                      :data="deparment" 
                                      :render-content="renderContent"
                                      :props="defaultProps"
                                      node-key="id"
                                      default-expand-all
                                      :expand-on-click-node="false">
                                      </el-tree>
                                  </el-form-item>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                    <AddPopover @data="formData"/>
                </div>
            </el-form-item>
      </el-form>
  </div>
</template>
<script>
const DepartmentSetting = () => import('@/components/setting/staff/DepartmentSetting')
const AddPopover = () => import('@/components/common/AddPopover')
const Breadcrumb = () => import('@/components/common/Breadcrumb')
// let id = 1000
export default {
  name: 'Staff',
  data () {
    return {
      one: [],
      form: [],
      content: {
        firstTitle: '设置',
        secondTitle: '菜单与功能',
        type: 'close'
      },
      showPopover: false,
      ruleForm: {
        name: '',
        superior: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' }
        ],
        superior: [
          { required: true, message: '请输入上级部门' }
        ]
      },
      activeName: 'first',
      deparment: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      defaultValue: {
        'timestamp': 0,
        'version': 'string',
        'operation': 'string'
      }
    }
  },
  created () {
    this.$http.post('menu/list?token=' + window.commo.token, window.commo.defaultParameter).then(res => {
      this.deparment = res.data.suppliersMenus
    })
  },
  mounted () {
    window.bus.$on('addBackData', res => {
      this.deparment = res
    })
  },
  methods: {
    formData (value) {
      console.log(value)
    },
    handleClick () {},
    saveDepartment () {
      this.showPopover = false
    },
    cancel () {
      this.showPopover = false
    },
    append_menu (data) {
      this.information('新增子菜单', true, 'role', '子菜单名称', '上级菜单', 'addChildMenu', data.id)
    },
    append_function (data) {
      this.information('新增功能', true, 'fcn', '功能名称', '上级菜单', 'addFunction', data.id)
    },
    remove (node, data) {
      this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const value = Object.assign({}, window.commo.defaultParameter, {id: data.id})
        this.$http.post('menu/delete?token=' + window.commo.token, value).then(res => {
          if (res.data.errCode === 0) {
            this.$message.success('菜单删除成功')
            this.deparment = res.data.suppliersMenus
          }
        })
      })
    },
    information (title, show, type, first, second, num, id) {
      let sendContent = {
        title: title,
        show: show,
        type: type,
        first: first,
        second: second,
        num: num,
        id: id
      }
      window.bus.$emit('showPopover', sendContent)
    },
    edit (node, data) {
      this.information('修改菜单', true, 'role', '菜单名称', '上级菜单', 'editMenu', data.id)
    },
    addDepartment () {
      this.information('新增菜单', true, 'role', '菜单名称', '上级菜单', 'addDepartment')
    },
    renderContent (h, {node, data, store}) {
      return (
        <span class="node-tyle">
            <span>
                <span>{node.data.name}</span>
            </span>
            <span>
                <el-button style="font-size: 12px;" type="text" on-click={ () => this.append_menu(data) }>新增子菜单</el-button>
                <el-button style="font-size: 12px;" type="text" on-click={ () => this.append_function(data) }>新增功能</el-button>
                <el-button style="font-size: 12px;" type="text" on-click={ () => this.edit(node, data) }>修改</el-button>
                <el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
            </span>
        </span>
      )
    }
  },
  components: {
    DepartmentSetting,
    AddPopover,
    Breadcrumb
  }
}
</script>
<style lang="scss">
     .menu-function-content {
        margin-top: 10px;
        background-color: white;
        padding: 20px 30px;
        position: relative;
        .el-tree-node__content{
        border-bottom: 1px solid #edf0f9;
        border-top: 1px solid #edf0f9;
      }
    }
    .expand-trigger div {
        height: 50px!important;
    }
    .menu-function-setting {
        position: relative;
    }
    .node-tyle {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content:
        space-between;
        font-size: 14px;
        padding-right: 8px;
    }
    .el-tree-node__content{
      height: 50px;
    }
    .menu-function{
      .increase {
        box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
        .el-form-item {
          .el-form-item__content {
            text-align: left;
            .el-button{
              width: 82px!important;
              height: 34px!important;
              padding:0!important;
            }
          }
        }
      }
    }
</style>
